<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>首页 -Family 族谱系统</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="Family族谱系统">
    <meta name="description" content="Family族谱系统">
    <meta name="author" content="zeal">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <style>
        .g6-tooltip {
            width: 300px;
            border: 1px solid #e2e2e2;
            border-radius: 4px;
            font-size: 12px;
            color: #545454;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 10px 8px;
            box-shadow: rgb(174, 174, 174) 0px 0px 10px;

        }
    </style>
</head>

<body class="lyear-layout-sidebar-close">
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="index.html"><h4 class="h4 text-primary">Family族谱管理系统</h4></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item active"><a href="/index.html"><i class="mdi mdi-home"></i> 族谱树</a></li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-account"></i> 成员管理</a>
                            <ul class="nav nav-subnav">
                                <li><a href="/list.html">成员列表</a></li>
                                <li><a href="/add.html">成员添加</a></li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-account-multiple"></i> 分组管理</a>
                            <ul class="nav nav-subnav">
                                <li><a href="/group_add.html">群组添加</a></li>
                                <li><a href="/group_list.html">群组列表</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 后台首页 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <span>${session.SPRING_SECURITY_CONTEXT.authentication.principal.username!} <span
                                        class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="/logout"><i class="mdi mdi-logout-variant"></i> 退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div id="container"></div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.2.9/build/g6.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>

<!--图表插件-->
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript">
  $(document).ready(function (e) {
    const width = document.getElementById('container').scrollWidth
    const height = document.getElementById('container').scrollHeight || 800

    const graph = new G6.TreeGraph({
      container: 'container',
      width,
      height,
      pixelRatio: 2,
      linkCenter: true,
      modes: {
        default: [{
          type: 'collapse-expand',
          onChange: function onChange (item, collapsed) {
            const data = item.get('model').data
            data.collapsed = collapsed
            return true
          }
        },
          {
            type: 'tooltip',
            formatText: function formatText (model) {
              const text = '<div class="card"><div class="card-header bg-primary"><h4 class="text-center">' + model.name.split('[')[0] + '</h4></div><div class="card-body"><h6><span>性别：</span><span>' + model.gender + '</span></h6><h6><span>配偶：</span><span>' + model.spouse + '</span></h6><h6><span>备注：</span><span>' + model.introduction + '</span></h6></div></div>'
              return text
            }
          },
          {
            type: 'edge-tooltip',
            formatText: function formatText (model) {
              const text = 'description: ' + model.label
              return text
            }
          }, 'drag-canvas', 'zoom-canvas']
      },
      defaultNode: {
        shape: 'ellipse',
        size: [50, 30],
        color: '#40a9ff',
        subTreeSep: 20,
        anchorPoints: [[0, 0.5], [1, 0.5]],
        style: {
          fill: '#C6E5FF',
          stroke: '#5B8FF9'
        },
        labelCfg: {
          position: 'center'
        }
      },
      defaultEdge: {
        shape: 'cubic-vertical',
        style: {
          stroke: '#A3B1BF'
        }
      },
      layout: {
        type: 'compactBox',
        direction: 'TB', // H / V / LR / RL / TB / BT
        nodeSep: 50,
        rankSep: 100
      }
    })

    G6.registerNode('circle-animate', {
      afterDraw (cfg, group) {
        const shape = group.get('children')[0]
        shape.animate({
          repeat: true,
          onFrame (ratio) {
            const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10
            return {
              rx: cfg.size[0] / 2 + diff,
              ry: cfg.size[1] / 2 + diff,
            }
          }
        }, 3000, 'easeCubic')
      }
    }, 'circle')

    // 背景动画
    G6.registerNode('background-animate', {
      afterDraw (cfg, group) {
        const rx = cfg.size[0] / 2
        const ry = cfg.size[1] / 2
        const back1 = group.addShape('ellipse', {
          zIndex: -3,
          attrs: {
            x: 0,
            y: 0,
            rx,
            ry,
            fill: cfg.color,
            opacity: 0.6
          }
        })
        const back2 = group.addShape('ellipse', {
          zIndex: -2,
          attrs: {
            x: 0,
            y: 0,
            rx,
            ry,
            fill: cfg.color,
            opacity: 0.6
          }
        })
        const back3 = group.addShape('ellipse', {
          zIndex: -1,
          attrs: {
            x: 0,
            y: 0,
            rx,
            ry,
            fill: cfg.color,
            opacity: 0.6
          }
        })
        group.sort() // 排序，根据 zIndex 排序
        back1.animate({ // 逐渐放大，并消失
          rx: rx + 10,
          ry: ry + 10,
          opacity: 0.1,
          repeat: true // 循环
        }, 3000, 'easeCubic', null, 0) // 无延迟
        back2.animate({ // 逐渐放大，并消失
          rx: rx + 10,
          ry: ry + 10,
          opacity: 0.1,
          repeat: true // 循环
        }, 3000, 'easeCubic', null, 1000) // 1 秒延迟
        back3.animate({ // 逐渐放大，并消失
          rx: rx + 10,
          ry: ry + 10,
          opacity: 0.1,
          repeat: true // 循环
        }, 3000, 'easeCubic', null, 2000) // 2 秒延迟
      }
    }, 'ellipse')

    graph.node(function (node) {
      let position = 'center'
      let fill = '#C6E5FF'
      let shape = 'ellipse'
      if (!node.children) {
        position = 'center'
      }
      if (node.name === '${session.SPRING_SECURITY_CONTEXT.authentication.principal.username!}') {
        shape = 'background-animate'
      }
      if (node.spouse !== '' && node.spouse !== '暂无' && node.name.indexOf('[') < 0) {
        if (node.spouse.indexOf(',') > 0) {
          node.name = node.name + '[' + node.spouse.split(',')[0] + '...]'
        } else if (node.spouse.indexOf('，') > 0) {
          node.name = node.name + '[' + node.spouse.split('，')[0] + '...]'
        } else if (node.spouse.indexOf('.') > 0) {
          node.name = node.name + '[' + node.spouse.split('.')[0] + '...]'
        } else if (node.spouse.indexOf('、') > 0) {
          node.name = node.name + '[' + node.spouse.split('、')[0] + '...]'
        } else {
          node.name = node.name + '[' + node.spouse + ']'
        }

      }
      if (node.gender === 'FEMALE') {
        fill = '#FF80AB'
        node.gender = '女'
      } else {
        node.gender = '男'
      }
      return {
        label: node.name,
        shape,
        style: {
          fill
        },
        labelCfg: {
          position,
          style: {
            textAlign: 'center',
            fontSize: 10
          }
        }
      }
    })

    const tmp = ${json(data)}
      graph.data(tmp)
    graph.render()
    graph.fitView()
  })

</script>
</body>

</html>